<template>
  <div class="head">
    <div class="top">
      <div class="contact">
        <ul class="contact-items">
          <li>
            <a href="">steven@tonme.com</a>
          </li>
          <li><a href="">+86 13927496491</a></li>
        </ul>
      </div>
      <div class="search-box">
        <Select
          class="search-input"
          :placeholder="$t('lang.enter') + $t('lang.product')"
          v-model="currentPro"
          filterable
          :remote-method="remote"
          :loading="loadding"
          @on-change="onChange"
        >
          <Option
            v-for="(option, index) in options"
            :value="option.id"
            :key="index"
            >{{ option.name }}</Option
          >
        </Select>
        <!-- <Button class="search-btn">search</Button> -->
      </div>
      <div class="my-i18n">
        <Dropdown>
          <a href="javascript:void(0)">
            {{ myLanguage }}
            <Icon type="ios-arrow-down"></Icon>
          </a>
          <DropdownMenu slot="list">
            <DropdownItem @click.native="languageChange('zh-CN', '中文')"
              >中文</DropdownItem
            >
            <DropdownItem @click.native="languageChange('en-US', 'English')"
              >English</DropdownItem
            >
            <DropdownItem
              @click.native="languageChange('ru_RU', 'русский язык')"
              >русский язык</DropdownItem
            >
          </DropdownMenu>
        </Dropdown>
      </div>
    </div>
    <div class="bottom">
      <ul class="bottom-menus">
        <li v-for="item in menus" :key="item.id">
          <a @click="change(item.id)">{{ $t(item.name) }}</a>
          <ul class="subs-menus" v-if="item.subs">
            <li v-for="(sub, index) in item.subs" :key="sub.id">
              <a @click="detail(item, sub, index)">{{ sub.name }}</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="logo-box">
      <img class="logo" :src="require('@/assets/20210727223148.png')" alt="" />
    </div>
  </div>
</template>
<script>
import store from "@/store";
import { mapGetters } from "vuex";
import { Dropdown, DropdownMenu, DropdownItem, Icon } from "view-design";
import { getProducts } from "@/utils/api.js";
export default {
  name: "e-head",
  components: {
    Dropdown,
    DropdownMenu,
    DropdownItem,
    Icon,
  },
  data() {
    return {
      myLanguage: localStorage.getItem("language_t") || "中文",
      menus: [
        {
          id: "1",
          name: "lang.home",
        },
        {
          id: "2",
          name: "lang.aboutUs",
        },
        {
          id: "3",
          name: "lang.product",
          subs: [],
        },
        {
          id: "4",
          name: "lang.solution",
          subs: [],
        },
        {
          id: "5",
          name: "lang.successfulCase",
          subs: [],
        },
        {
          id: "6",
          name: "lang.news",
        },
        {
          id: "7",
          name: "lang.contactUs",
        },
      ],
      currentPro: "",
      loadding: false,
      options: [],
    };
  },
  computed: {
    ...mapGetters(["solutions", "successfulCase", "pAttributes"]),
  },
  watch: {
    solutions: {
      handler: function (newValue) {
        this.menus[3].subs = newValue;
      },
    },
    successfulCase: {
      handler: function (newValue) {
        this.menus[4].subs = newValue;
      },
    },
    pAttributes: {
      handler: function (newValue) {
        this.menus[2].subs = newValue;
      },
    },
  },
  created() {
    store.dispatch("fetchSolutions");
    store.dispatch("fetchSuccessfulCase");
    store.dispatch("fetchPAttributes");
    this.menus[3].subs = this.solutions;
    this.menus[4].subs = this.successfulCase;
    this.menus[2].subs = this.pAttributes;
  },
  methods: {
    change(e) {
      switch (e) {
        case "1":
          this.$router.push({ path: "/index" });
          break;
        case "2":
          this.$router.push({ path: "/about-us" });
          break;
        case "3":
          this.$router.push({ path: "/product" });
          break;
        case "4":
          this.$router.push({ path: "/solution" });
          break;
        case "5":
          this.$router.push({ path: "/successful-case" });
          break;
        case "6":
          this.$router.push({ path: "/news" });
          break;
        case "7":
          this.$router.push({ path: "/contact-us" });
          break;
        default:
          break;
      }
    },
    detail(e, e2, index) {
      if (e.id == 3) {
        this.$router.push({ path: "/product/" + e2.id });
      } else if (e.id == 4) {
        this.$router.push({ path: "/solution/detail/" + e2.id });
        localStorage.setItem(
          "solution",
          JSON.stringify({
            current: index,
            data: this.menus[e.id - 1].subs,
          })
        );
      } else {
        this.$router.push({ path: "/successful-case/detail/" + e2.id });
        localStorage.setItem(
          "successful-case",
          JSON.stringify({
            current: index,
            data: this.menus[e.id - 1].subs,
          })
        );
      }
      window.location.reload();
    },
    languageChange(e, t) {
      console.log(e);
      this.myLanguage = t;
      this.$i18n.locale = e;
      localStorage.setItem("language", e);
      localStorage.setItem("language_t", t);
    },
    remote(query) {
      if (query !== "") {
        this.loadding = true;

        getProducts({
          pageSize: 200,
          current: 1,
        }).then((res) => {
          this.loadding = false;
          let data = res.data.data || [];
          data.forEach((item, index) => {
            item.imgs = item.imgs.split(",");
            data[index] = item;
          });
          this.options = data.filter(
            (item) => item.name.toLowerCase().indexOf(query.toLowerCase()) > -1
          );
        });
      } else {
        this.options = [];
      }
    },
    onChange(e) {
      if (!e) return;
      const product = this.options.filter((item) => item.id == e)[0];
      let current = null;
      console.log(this.pAttributes);
      this.pAttributes.forEach((item, index) => {
        if (item.id == product.type_id) {
          current = index;
        }
      });
      localStorage.setItem(
        "product_attribute",
        JSON.stringify({
          current: current,
          data: this.pAttributes,
        })
      );
      localStorage.setItem("product", JSON.stringify(product));
      this.$router.push("/product/detail/" + product.id);
    },
  },
};
</script>

<style lang="scss" scoped>
.head {
  width: 100%;
  display: inline-block;
  .top {
    height: 50px;
    background-color: #111;

    display: flex;
    justify-content: flex-end;
    align-items: center;
    .contact {
      margin-right: 30px;
      .contact-items {
        li a {
          color: #fff;
        }
      }
    }
    .search-box {
      display: flex;
      padding-right: 200px;
      .search-input {
        width: 215px;
        height: 30px;
        // border-radius: 14px;
        overflow: hidden;
        border: 0;
        outline: 0;
        padding-left: 10px;
      }
      .search-btn {
        width: 65px;
        position: relative;
        left: -20px;
        border: none;
        background: #666;
        color: #fff;
        cursor: pointer;
        outline: 0;
        border-radius: 15px 0 15px 0;
      }
    }
    .my-i18n {
      float: right;
      position: relative;
      right: 50px;
    }
  }
  .bottom {
    width: 70%;
    min-height: 50px;
    float: right;
    background-color: #fff;
    .bottom-menus {
      list-style: none;
      float: left;

      & > li {
        float: left;
        position: relative;
        a {
          display: block;
          padding: 11px 30px;
          font-weight: 500;
          font-size: 17px;
          line-height: 1.7;
          color: #000;
          &:hover {
            color: #fff;
            background-color: #000;
          }
        }

        .subs-menus {
          display: none;
          position: absolute;
          background-color: #fff;
          z-index: 1000;
        }
        &:hover {
          .subs-menus {
            display: block;
            animation-name: fadeInOut;
            animation-timing-function: ease-in-out;
            animation-iteration-count: 1;
            animation-duration: 0.7s;
            animation-direction: normal;
            & > li {
              position: relative;
              top: -2px;
              a {
                height: 45px;
                line-height: 45px;
                white-space: nowrap;
                padding: 0 15px;
              }
            }
          }
        }
      }
    }
  }
  .logo-box {
    width: 30%;
    height: 100px;
    background-color: #111;
    position: absolute;
    top: 0;
    padding-right: 30px;
    line-height: 100px;
    transform: skew(-45deg, 0deg);
    left: -50px;
    text-align: right;
    .logo {
      transform: skew(45deg, 0deg);
      vertical-align: middle;
    }
  }
}
</style>